<template>
  <div class="form-list">
    <div class="form-content">
      <div class="form-head form-head-one">
        <h1>变更商标申请人/注册人名义/地址变更集体商标/证明商标管理规则/集体成员名单申请书</h1>
      </div>
      <el-form :label-positon="labelPosition" label-width="280px" size="mini">
        <!-- 申请人名义 -->
        <el-form-item label="营业执照公司名称(中文)：">
          <span>{{ formData.appName }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.appNameEn }}</span>
        </el-form-item>

        <!-- 申请人地址 -->
        <el-form-item label="变更后营业执照地址(中文)：">
          <span>{{ formData.busAddress }}</span>
        </el-form-item>
        <!-- 申请人地址 -->
        <el-form-item label="(英文)：">
          <span>{{ formData.appAddEn }}</span>
        </el-form-item>

        <!-- 邮政编码 -->
        <el-form-item label="邮政编码：">
          <span>{{ formData.postCode }}</span>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人：">
          <span>{{ formData.contacts }}</span>
        </el-form-item>
        <el-form-item label="邮箱：">
          <span>{{ formData.email }}</span>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="电话：">
          <span>{{ formData.phone }}</span>
        </el-form-item>

        <!-- 代理机构名称 -->
        <el-form-item label="代理机构名称：">
          <span>{{ formData.ageName }}</span>
        </el-form-item>

        <!-- 商标申请后号/注册号 -->
        <el-form-item label="商标申请号/注册号：">
          <span>{{ formData.appNum }}</span>
        </el-form-item>
        <!-- 变更前名义 -->
        <!-- <el-form-item label="变更前名义：">
                <span>{{ formData.appNum }}</span>
        </el-form-item>-->
        <!-- 变更前地址 -->

        <!-- 变更管理规则 -->
        <el-form-item label="变更集体成员名单：">
          <span v-if="formData.chaMeList==1">是</span>
          <span v-if="formData.chaMeList==0">否</span>
        </el-form-item>

        <!-- 变更集体成员名单 -->
        <el-form-item label="变更管理规则：">
          <span v-if="formData.changeName==1">是</span>
          <span v-if="formData.changeName==0">否</span>
        </el-form-item>

        <!-- 身份证照片 -->
        <el-form-item label="营业执照：" class="busimg-img" v-if="formData.busimg">
          <imgshow>
            <img :src="this.mconfig.host+formData.busimg" alt />
          </imgshow>
        </el-form-item>
        <el-form-item label="身份证正反面：" class="idcard-img" v-if="formData.appliType==1">
          <imgshow>
            <img :src="this.mconfig.host+formData.idcardface" alt />
          </imgshow>
        </el-form-item>

        <el-form-item label="变更管理规则（证明商标）：" class="busimg-img" v-if="formData.zmOtherfile.length > 0"> 
          <imgshow v-for="(item,index) in formData.zmOtherfile" :key="index">
            <img :src="mconfig.host+item" alt />
          </imgshow>
        </el-form-item>
        <el-form-item label="文字说明（证明商标）：" class="busimg-img" v-if="formData.zmOthertext"> 
          {{formData.zmOthertext}}
        </el-form-item>

        <el-form-item label="变更管理规则（集体商标）：" class="busimg-img" v-if="formData.jtOtherfile.length > 0"> 
          <imgshow v-for="(item,index) in formData.jtOtherfile" :key="index">
            <img :src="mconfig.host+item" alt />
          </imgshow>
        </el-form-item>

        <el-form-item label="文字说明（集体商标）：" class="busimg-img" v-if="formData.jtOthertext"> 
          {{formData.jtOthertext}}
        </el-form-item>

        <el-form-item label="变更集体成员（集体成员）：" class="busimg-img" v-if="formData.jtuserOtherfile.length > 0"> 
          <imgshow v-for="(item,index) in formData.jtuserOtherfile" :key="index">
            <img :src="mconfig.host+item" alt />
          </imgshow>
        </el-form-item>

        <el-form-item label="文字说明（集体成员）：" class="busimg-img" v-if="formData.jtuserOthertext"> 
          {{formData.jtuserOthertext}}
        </el-form-item>


        <el-form-item label="网上确认书：" class="busimg-img" >
          <imgshow>
            <img :src="this.mconfig.host+formData.qrfile" alt />
          </imgshow>
        </el-form-item>
        <el-form-item label="其他附件：" class="busimg-img" v-if="otherfileFn()">
          <imgshow v-for="(item,index) in formData.otherfile" :key="index">
            <img :src="mconfig.host+item" alt />
          </imgshow>
        </el-form-item>

        <el-form-item label="变更前信息：" v-if="proAppchangeAddListFn()">
          <div class="changeMsg">
            <el-form class="model-form" label-width="100px" size="small">
              <div v-for="(item,index) in proAppchangeAddList" :key="index">
                <el-row>
                  <el-form-item :label="index+1 + '.变更前名义：' ">
                    <span>{{item.befNameChangeCn}}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="(英文)：">
                    <span>{{item.befNameChangeEn}}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="变更前地址：">
                    <span>{{item.befAddChangeCn}}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="(英文)：">
                    <span>{{item.befAddChangeEn}}</span>
                  </el-form-item>
                </el-row>
              </div>
            </el-form>
          </div>
        </el-form-item>
      </el-form>

      <div class="signs">
        <el-row>
          <el-col :span="8" :offset="4">
            <span>申请人章戳(签字):</span>
          </el-col>
          <el-col :span="8" :offset="4">
            <span>代理机构章戳:</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="16">
            <span>代理人签字:</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 暂时隐藏 20200826 2136 -->
    <!-- <div class="form-content" v-if="appLenFn()">
      <div class="form-head">
        <h1>
          变更商标申请人/注册人名义/地址变更集体商标/证明商标管理规则/
          集体成员名单申请书
          (附页)
        </h1>
        <p>其他共有许可人</p>
      </div>
      <proAppend class="form2" :callback="append"></proAppend>
    </div> -->
  </div>
</template>
<script>
import imgshow from "../common/imgshow";
import proAppend from "../common/proAppend";
export default {
  components: {
    imgshow,
    proAppend,
  },
  data() {
    return {
      arr: [],
      // 变更商标申请人/注册人名义
      // 右对齐
      labelPosition: "right",
      // 字段名
      formData: {
        zmOtherfile:[],
        zmOthertext:"",
        jtuserOtherfile:[],
        jtuserOthertext:"",
        jtOtherfile:[],
        jtOthertext:"",
        decTraAppModel:0 ,
        ageName: "", // 代理机构名称
        appAddCn: "", // 申请人地址（中文）
        appAddEn: "", // 申请人地址（英文）
        appNameCn: "", // 申请人名称（中文）
        appNameEn: "", // 申请人名称（英文）
        appNum: "", // 商标申请号/注册号
        befAddChangeCn: "", // 变更前地址(中文)
        befAddChangeEn: "", // 变更前地址（英文）
        befNameChangeCn: "", // 变更前名称（中文）
        befNameChangeEn: "", // 变更前名称（英文）
        branchNetworkId: "", // 网点编号
        chaMeList: "1", // 变更集体成员名单
        changeName: "1", // 变更管理规则
        contacts: "", // 联系人
        id: "", // 主键
        imgAdd: [], // 身份证或者营业执照地址
        isComm: "1", // 是否共有商标
        phone: "", // 电话
        postCode: "", // 邮政编码
        proAppendJson: "", // 共享人json
        subStatus: "1", // 状态
        userId: "", // 用户id
        otherfile: [],
      },
      append: [
        {
          attr: "",
          changeAfterAddr: "",
          changeAfterAddrEn: "",
          changeAfterName: "",
          changeAfterNameEn: "",
          classId: "",
          id: "",
          modelId: "",
          partAddrCh: "",
          partAddrEn: "",
          partNameCh: "",
          partNameEn: "",
          type: "",
        },
      ], // 共享人
      proAppchangeAddList: [
        {
          befNameChangeCn: "",
          befNameChangeEn: "",
          befAddChangeEn: "",
          befAddChangeCn: "",
        },
      ],

      // 编辑
      bool: false,
      change_btn: "修改",
      disabled: false,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    otherfileFn(){
      // console.log(JSON.stringify (this.formData.otherfile));
      // console.log(this.formData.otherfile.length);
      // if(this.formData.otherfile.length == 0 || this.formData.otherfile == null){
      //   return false
      // }else{
      //   return true
      // }
      return false
    },
    appLenFn() {
      let appLen = false;
      if(this.formData.decTraAppModel != 2){
          // this.append.forEach((item) => {
          //   for (const key in item) {
          //     if (item[key] != "") {
          //       appLen += 1;
          //     }
          //   }
          // });
      }else{
        appLen = true
      }
     
      return appLen
    },
    proAppchangeAddListFn(){
      
      var appLen = false;
      for (const x in this.proAppchangeAddList) {
        // &&  this.proAppchangeAddList[x].befAddChangeEn == "" &&  
        // this.proAppchangeAddList[x].befNameChangeCn == "" &&  
        // this.proAppchangeAddListr[x].befNameChangeEn == ""
          // console.log(this.proAppchangeAddList[x].befAddChangeCn);
          if (this.proAppchangeAddList[x].befAddChangeCn == "" && this.proAppchangeAddList[x].befAddChangeEn == "" && this.proAppchangeAddList[x].befNameChangeCn == "" && this.proAppchangeAddList[x].befNameChangeEn == ""){

            appLen = false
          }else{
            appLen = true
          }
      }
      return appLen;
    },
    getMainData(s) {
      return this.$http.get("/trademark/proTAppChange/findByIdDetl", {
        params: {
          id: s,
        },
      });
    },
    getDept() {
      //获取代理网点
      return this.$http.get("/trademark/system/dept/findDept");
    },
    funb(s) {
      var me = this;
      me.$http.all([me.getMainData(s), me.getDept()]).then(
        me.$http.spread(function (MainData, Dept) {
          me.formData = MainData.data.data.data;
          // 获取代理网点
          var DeptData = Dept.data.data;
          for (const k in DeptData) {
            if (DeptData.hasOwnProperty(k)) {
              const element = DeptData[k];
              if (MainData.data.data.data.branchNetworkId == element.deptId) {
                me.formData.ageName = element.deptName;
                break;
              }
            }
          }
          me.proAppchangeAddList = Object.assign(
            me.proAppchangeAddList,
            MainData.data.data.proAppchangeAddList
          );
          me.formData.otherfile = JSON.parse(me.formData.otherfile);
          me.formData.jtuserOtherfile = JSON.parse(me.formData.jtuserOtherfile);
          me.formData.jtOtherfile = JSON.parse(me.formData.jtOtherfile);
          me.formData.zmOtherfile = JSON.parse(me.formData.zmOtherfile);
          me.append = Object.assign(me.append, MainData.data.data.append);
        })
      );
    },
    
  },
  mounted() {
    this.id = this.$route.query.id;
    this.funb(this.id);
    
  },
};
</script>

<style scoped>
.form2 {
  margin-left: 60px;
}
.form-list {
  display: inline-block;
  margin-left: 210px;
}

.form-head h1,
.form-head p {
  font-size: 22px;
  font-weight: normal;
  text-align: center;
  margin: 120px auto 20px auto;
  max-width: 525px;
  /* line-height: 45px; */
}

.form-head-one h1 {
  font-size: 25px;
  margin: 20px auto 20px auto;
}

.form-head p {
  font-size: 18px;
  margin: 20px 0;
}

.form-content {
  /* width: 768px; */
  margin: 0 auto;
}

.form-list /deep/ .el-form-item__label {
  /* font-size: 18px; */
  border-bottom: none;
  height: 30px;
  padding-right: 0;
}

.form-list /deep/ .el-form-item__content {
  /* font-size: 18px; */
  border-left: none;
  border-bottom: none;
  /* padding-left: 10px; */
  height: auto;
  box-sizing: border-box;
  word-break: break-word;
}

.form-list ::v-deep .el-form-item {
  margin: 0;
}

.form-list .el-input.el-input--mini {
  font-size: 14px;
}

.same-line {
  display: flex;
  justify-content: space-between;
}

.signs {
  display: none;
}

.idcard-img img,
.busimg-img img {
  display: inline-block;
  margin: 0 5px;
}

.busimg-img img {
  width: 500px;
}

.idcard-img img {
  width: 300px;
}

.idcard-img {
  width: 300px;
  margin-top: 10px !important;
}

.busimg-img {
  width: 500px;
  margin-top: 10px !important;
}

.same-line .sign {
  font-size: 18px;
  color: rgb(191, 191, 191);
}

.same-line .el-form-item {
  width: 50%;
}

.same-line-s {
  display: flex;
  justify-content: space-between;
}

.same-line-s /deep/ .el-checkbox {
  width: 50%;
  text-align: left;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
  font-size: 18px;
}

.img-box {
  width: 150px;
  height: 150px;
  display: flex;
}

.img-box img {
  margin-right: 10px;
  width: 100%;
  height: 100%;
}

.form-list .signs .el-row {
  margin: 150px 0;
}

.form-list .el-row .el-col {
  text-align: left;
}

.form-list .el-row .el-col span {
  font-size: 18px;
}
</style>
